<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width: 100px;height: 100px;background: red;position: absolute;left:0;top:0;}
        .box2{width: 100px;height: 100px;background: green;position: absolute;left:0;top:110px;}
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
<script>
    function Drag(ele){
        this.ele = ele;
        this.addEvent();
    }
    Drag.prototype.addEvent = function(){
        this.ele.onmousedown = this.down.bind(this);
    }
    Drag.prototype.down = function(downEve){
        this.downEve = downEve
        document.onmousemove = this.move.bind(this)
        document.onmouseup = this.up;
    }
    Drag.prototype.move = function(moveEve){
        this.ele.style.left = moveEve.pageX - this.downEve.offsetX + "px"
        this.ele.style.top = moveEve.pageY - this.downEve.offsetY + "px"
    }
    Drag.prototype.up = function(){
        document.onmousemove = document.onmouseup = null;
    }


    function SmallDrag(ele){
        Drag.bind(this)(ele)
    }
    SmallDrag.prototype = {
        ...Drag.prototype
    }
    SmallDrag.prototype.move = function(moveEve){
        var l = moveEve.pageX - this.downEve.offsetX;
        if(l<0){
            l=0
        }
        this.ele.style.left = l + "px"
        this.ele.style.top = moveEve.pageY - this.downEve.offsetY + "px"
    }
    

    var obox1 = document.querySelector(".box1")
    var obox2 = document.querySelector(".box2")

    new Drag(obox1);
    
    new SmallDrag(obox2);
</script>
</html>